<script>


import { selectFriendList } from '@/api/chat/friendList'

export default {
  name: '',
  data() {
    return {
      friendList: [],
      loading: false
    }
  },
  methods: {
    getFriendList() {
      selectFriendList().then(({ data }) => {
        this.friendList = data
      })
    },
    toChatting(item) {
      console.log('item: ', item)
      this.$router.push(`/chatting/${item.friendUserId}`)
    }
  },
  created() {
    this.getFriendList()
  }
}
</script>

<template>
  <div>
    <div class="friend grid-content bg-purple " v-loading="loading">
      <el-card @click.native="toChatting(item)" v-for="(item,index) in friendList" :key="index"
               :body-style="{ padding: '0px' }"
      >

        <el-row>
          <!--左侧头像区域-->
          <el-col :span="8">
            <img
              :src="item.avatar"
              class="headImg"
            >
          </el-col>
          <!--右侧昵称和信息预览-->
          <el-col :span="14">
            <div class="nickName"> {{ item.nickName }} ({{ item.phonenumber }})</div>
            <!-- 操作按钮 -->
          </el-col>

        </el-row>

      </el-card>
    </div>
  </div>
</template>

<style>
.headImg {
  width: 100px;
  border-radius: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.nickName {
  line-height: 50px;
  font-weight: 800;

}

.grid-content .bg-purple {
  margin-top: 50px; /* 添加一个与 .findUser 高度相同的上边距，以防止 .grid-content bg-purple 被 .findUser 遮挡 */
  overflow-y: auto; /* 允许 .grid-content bg-purple 上下滚动 */
  height: calc(100vh - 95px); /* 设置 .grid-content bg-purple 的高度为视口高度减去 .findUser 的高度，以确保 .grid-content bg-purple 不会超出视口 */
}
</style>
